<template>
  <div class="loan-detail">
    <el-descriptions :column="2" border size="medium">
      <el-descriptions-item label="贷款编号">{{ loanInfo.loanNo }}</el-descriptions-item>
      <el-descriptions-item label="客户姓名">{{ loanInfo.customerName }}</el-descriptions-item>
      <el-descriptions-item label="客户ID">{{ loanInfo.customerId }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ loanInfo.phone }}</el-descriptions-item>
      <el-descriptions-item label="贷款类型">{{ getLoanTypeText(loanInfo.loanType) }}</el-descriptions-item>
      <el-descriptions-item label="贷款金额">{{ formatMoney(loanInfo.loanAmount) }}</el-descriptions-item>
      <el-descriptions-item label="贷款期限">{{ loanInfo.loanTerm }}个月</el-descriptions-item>
      <el-descriptions-item label="年利率">{{ loanInfo.interestRate }}%</el-descriptions-item>
      <el-descriptions-item label="月供金额">{{ formatMoney(loanInfo.monthlyPayment) }}</el-descriptions-item>
      <el-descriptions-item label="贷款用途">{{ getPurposeText(loanInfo.purpose) }}</el-descriptions-item>
      <el-descriptions-item label="还款方式">{{ getRepaymentMethodText(loanInfo.repaymentMethod) }}</el-descriptions-item>
      <el-descriptions-item label="担保方式">{{ getGuaranteeTypeText(loanInfo.guaranteeType) }}</el-descriptions-item>
      <el-descriptions-item label="担保物价值" v-if="loanInfo.collateralValue">{{ formatMoney(loanInfo.collateralValue) }}</el-descriptions-item>
      <el-descriptions-item label="贷款状态">
        <el-tag :type="getStatusType(loanInfo.status)">{{ getStatusText(loanInfo.status) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="审批状态">
        <el-tag :type="getApprovalStatusType(loanInfo.approvalStatus)">{{ getApprovalStatusText(loanInfo.approvalStatus) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="审批意见">{{ loanInfo.approvalComment }}</el-descriptions-item>
      <el-descriptions-item label="批准金额">{{ formatMoney(loanInfo.approvedAmount) }}</el-descriptions-item>
      <el-descriptions-item label="放款日期">{{ loanInfo.loanDate }}</el-descriptions-item>
      <el-descriptions-item label="首次还款日期">{{ loanInfo.firstRepaymentDate }}</el-descriptions-item>
      <el-descriptions-item label="最后还款日期">{{ loanInfo.lastRepaymentDate }}</el-descriptions-item>
      <el-descriptions-item label="申请时间">{{ loanInfo.createTime }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ loanInfo.updateTime }}</el-descriptions-item>
    </el-descriptions>

    <!-- 附件列表 -->
    <div class="attachment-section" v-if="loanInfo.attachments && loanInfo.attachments.length > 0">
      <h3>附件列表</h3>
      <el-table :data="loanInfo.attachments" border style="width: 100%">
        <el-table-column prop="fileName" label="文件名称" />
        <el-table-column prop="fileType" label="文件类型">
          <template #default="scope">
            {{ getFileTypeText(scope.row.fileType) }}
          </template>
        </el-table-column>
        <el-table-column prop="uploadTime" label="上传时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="previewFile(scope.row)">预览</el-button>
            <el-button link type="primary" @click="downloadFile(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { loanApplyApi } from '@/api/loan'

// 定义 props
const props = defineProps({
  loanId: {
    type: String,
    required: true
  }
})

// 贷款详情数据
const loanInfo = ref({})
const loading = ref(false)

// 获取贷款详情
const getLoanDetail = async () => {
  try {
    loading.value = true
    const res = await loanApplyApi.getInfo(props.loanId)
    if (res.code === 200 || res.code === '200') {
      // 处理后端新的数据结构
      if (res.data && typeof res.data === 'object') {
        loanInfo.value = res.data
      } else if (res.data && res.data.data && typeof res.data.data === 'object') {
        // 处理嵌套的数据结构
        loanInfo.value = res.data.data
      } else {
        console.warn('未识别的贷款详情数据结构:', res)
        ElMessage.error('获取贷款详情数据格式异常')
      }
    } else {
      ElMessage.error(res.msg || res.message || '获取贷款详情失败')
    }
  } catch (error) {
    console.error('获取贷款详情出错:', error)
    ElMessage.error('获取贷款详情失败')
  } finally {
    loading.value = false
  }
}

// 预览文件
const previewFile = (file) => {
  window.open(file.fileUrl, '_blank')
}

// 下载文件
const downloadFile = (file) => {
  const a = document.createElement('a')
  a.href = file.fileUrl
  a.download = file.fileName
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

// 格式化金额
const formatMoney = (amount) => {
  return amount ? '¥' + amount.toLocaleString() : '¥0'
}

// 获取贷款类型文本
const getLoanTypeText = (type) => {
  const map = {
    personal: '个人消费贷',
    house: '住房贷款',
    car: '车辆贷款',
    business: '经营贷款'
  }
  return map[type] || type
}

// 获取贷款状态文本
const getStatusText = (status) => {
  const map = {
    pending: '待审核',
    approved: '审核通过',
    disbursed: '已放款',
    closed: '已结清',
    rejected: '已拒绝',
    overdue: '已逾期'
  }
  return map[status] || status
}

// 获取审批状态文本
const getApprovalStatusText = (status) => {
  const map = {
    pending: '待审批',
    processing: '审批中',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return map[status] || status
}

// 获取贷款用途文本
const getPurposeText = (purpose) => {
  const map = {
    business: '经营周转',
    equipment: '设备采购',
    technology: '技术改造',
    other: '其他用途'
  }
  return map[purpose] || purpose
}

// 获取还款方式文本
const getRepaymentMethodText = (method) => {
  const map = {
    equalInstallment: '等额本息',
    equalPrincipal: '等额本金',
    interestFirst: '先息后本',
    bulletPayment: '一次性还本付息'
  }
  return map[method] || method
}

// 获取担保方式文本
const getGuaranteeTypeText = (type) => {
  const map = {
    credit: '信用',
    guarantee: '保证',
    mortgage: '抵押',
    pledge: '质押'
  }
  return map[type] || type
}

// 获取文件类型文本
const getFileTypeText = (type) => {
  const map = {
    idCard: '身份证',
    income: '收入证明',
    collateral: '抵押物证明',
    other: '其他'
  }
  return map[type] || type
}

// 获取状态标签类型
const getStatusType = (status) => {
  const map = {
    pending: 'warning',
    approved: 'success',
    disbursed: 'success',
    closed: 'info',
    rejected: 'danger',
    overdue: 'danger'
  }
  return map[status] || ''
}

// 获取审批状态标签类型
const getApprovalStatusType = (status) => {
  const map = {
    pending: 'warning',
    processing: 'primary',
    approved: 'success',
    rejected: 'danger'
  }
  return map[status] || ''
}

onMounted(() => {
  if (props.loanId) {
    getLoanDetail()
  }
})
</script>

<style scoped>
.loan-detail {
  padding: 20px 0;
}

.attachment-section {
  margin-top: 30px;
}

h3 {
  margin-bottom: 15px;
  font-weight: 500;
  color: #303133;
}

.mt-20 {
  margin-top: 20px;
}
</style> 